<template>
  <div class="card">
    <div class="left">
      <div class="p_absolute">
        <p class="reply_title">教学节奏评价</p>
        <p class="reply">{{ data.teaching_rhythm ? data.teaching_rhythm : '暂无' }}</p>
      </div>
    </div>
    <div class="right grid_3">
      <div v-for="item in data.dataList" :key="item.name">
        <div class="sen_info ">
          <div class="p_absolute">
            <p class="value_bule">{{ item.value ? item.value : '--' }}</p>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
    };
  }
};
</script>

<style scoped>
.card {
  width: 100%;
  height: 100%;
  display: flex;
}

.left {
  position: relative;
  height: 155px;
  width: 30%;
  margin: 5px;
  text-align: center;
  background: url('../../../assets/images/teach_ai/kuang_236.png') center center / 100% 100% no-repeat;
}

.reply_title {
  font-size: 16px;
  color: #FFFFFF;
  line-height: 17px;
  margin-bottom: 20px;
}

.reply {
  font-size: 22px;
  line-height: 33px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  color: #66FFFF;
}

.right {
  width: 67%;
}

.p_absolute {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sen_info {
  position: relative;
  height: 70px;
  text-align: center;
  width: 100%;
  margin: 5px;
  background: url('../../../assets/images/teach_ai/kuang_137.png') center center / 100% 100% no-repeat;
}

.value_bule {
  color: #66FFFF;
  font-size: 24px;
  line-height: 34px;
  padding-bottom: 5px;
}

.grid_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 10px;
  align-items: center;
}
</style>